<template>
    <div class="goods-image">
        <div class="large" v-show="show" :style="{ backgroundImage: `url(${list[curr]})`, backgroundPositionX: -position.left*2+'px', backgroundPositionY: -position.top*2+'px' }"></div>
        <div class="middle" ref="target">
            <img :src="list[curr]" alt="">
            <div class="layer" v-show="show" :style="{ left: position.left+'px', top: position.top+'px' }"></div>
        </div>
        <ul class="small">
            <li v-for="(item, i) in list" :key="i" @mouseenter="curr = i" :class="{ active: curr === i }">
                <img :src="item" alt="">
            </li>
        </ul>
    </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { useMouseInElement } from "@vueuse/core";
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

const curr = ref(0)

// 鼠标位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);
const show = ref(false)
const position = reactive({
    left: 0,
    top: 0
})
watch([elementX, elementY, isOutside], () => {
    show.value = !isOutside.value

    // 左右临界值
    // 控制X轴方向的定位 0-200 之间
    if (elementX.value < 100) position.left = 0
    else if (elementX.value > 300) position.left = 200
    else position.left = (elementX.value - 100)
    // 上下临界值
    if (elementY.value < 100) position.top = 0
    else if (elementY.value > 300) position.top = 200
    else position.top = (elementY.value - 100)
})

</script>
<style scoped lang="scss">
.goods-image {
    width: 480px;
    height: 400px;
    position: relative;
    display: flex;
    z-index: 500;

    .large {
        position: absolute;
        top: 0;
        left: 412px;
        width: 400px;
        height: 400px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-repeat: no-repeat;
        background-size: 800px 800px;
        background-color: #f8f8f8;
    }

    .middle {
        width: 400px;
        height: 400px;
        background: #f5f5f5;
        position: relative;
        cursor: move;

        .layer {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, .2);
            left: 0;
            top: 0;
            position: absolute;
        }
    }

    .small {
        width: 80px;

        li {
            width: 68px;
            height: 68px;
            margin-left: 12px;
            margin-bottom: 15px;
            cursor: pointer;

            &:hover,
            &.active {
                border: 2px solid $mainColor;
            }
        }
    }
}
</style>